/**
*@Create:YMHUI
*@DateTime:2019/10/1516:07
*@Description:TODO
**/
<template>
    <div id="questionnaire-edit">
        <el-backtop target=".el-scrollbar__wrap">UP</el-backtop>
        <el-container>
            <el-aside style="padding-top: 1.2em">
<!--                <el-card v-if="questionnaire.state!=='未发布'">-->
<!--                    <el-row>-->
<!--                        <el-button @click="this.$router.go(-1)">返回</el-button>-->
<!--                    </el-row>-->
<!--                </el-card>-->
                <el-card v-if="questionnaire.state==='未发布'">
                    <div>
                        <el-row>
                            <el-button type="text" icon="el-icon-setting" @click="$refs.dimensionSetting.open()">
                                维度设置
                            </el-button>
                        </el-row>
                        <el-row>
                            <el-button type="text" icon="el-icon-check" @click="submit">完成编辑</el-button>
                        </el-row>
                        <el-row>
                            <el-button type="text" icon="el-icon-delete" @click="goBackHome">放弃编辑</el-button>
                        </el-row>
                    </div>
                </el-card>
                <el-card v-if="questionnaire.state==='未发布'">
                    <div>
                        <el-table height="700px" :data="questionType">
                            <el-table-column label="题型" align="center">
                                <template slot-scope="scope">
                                    <el-button v-if="questionType[scope.$index] === 'single'" type="text"
                                               icon="el-icon-document-checked"
                                               @click="addSingle">单选题
                                    </el-button>
                                    <el-button v-else type="text" icon="el-icon-document" @click="addFill">填空题
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-aside>
            <el-main class="main">
                <el-scrollbar ref="myScrollbar" style="height:100%;">
                    <el-page-header v-if="questionnaire.state === '已发布'" @back="goBackHome" content="试卷详情">
                    </el-page-header>
                    <div style="height: 100%">
                        <el-row>
                            <el-popover
                                ref="edit"
                                placement="bottom"
                                v-model="popoverVisible"
                                trigger="click">
                                <el-form label-width="60px">
                                    <el-form-item label="标题">
                                        <el-input type="textarea" rows="2" style="width: 45em"
                                                  v-model="tempTitle"/>
                                    </el-form-item>
                                    <el-form-item label="说明">
                                        <el-input type="textarea" rows="2" style="width: 45em"
                                                  v-model="tempTag"/>
                                    </el-form-item>
                                    <el-form-item style="text-align: center">
                                        <el-button @click="saveTitle" type="primary" size="mini">保存</el-button>
                                        <el-button @click="popoverVisible = false" type="primary" size="mini">取消
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                                <div slot="reference">
                                    <el-row>
                                        <h2 style="display: inline; cursor: pointer;">
                                            {{questionnaire.name}}</h2>
                                        <el-button v-if="questionnaire.state==='未发布'" style="" size="small" type="primary" icon="el-icon-edit"
                                                   circle></el-button>
                                    </el-row>
                                    <el-row style="margin-top: 1.5rem;">
                                        <h3 style="display: inline; cursor: pointer;">{{questionnaire.tag}}</h3>
                                        <el-button v-if="questionnaire.state==='未发布'" style="" size="mini" type="primary" icon="el-icon-edit"
                                                   circle></el-button>
                                    </el-row>
                                </div>
                            </el-popover>
                        </el-row>
                        <el-row>
                            <el-table ref="table"
                                      :data="questionnaire.questions"
                                      style="height: 100%;">
                                <el-table-column label="题目">
                                    <template slot-scope="scope">
                                        <gap-fill v-if="questionnaire.questions[scope.$index].type === 'fill'"
                                                  :fill="questionnaire.questions[scope.$index]">
                                        </gap-fill>
                                        <single-select
                                            v-if="questionnaire.questions[scope.$index].type === 'single'"
                                            :single="questionnaire.questions[scope.$index]">
                                        </single-select>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-row>
                    </div>
                </el-scrollbar>
            </el-main>
        </el-container>
        <dimension-setting ref="dimensionSetting"></dimension-setting>
    </div>
</template>

<script>
    import GapFill from "../question/GapFill";
    import SingleSelect from "../question/SingleSelect";
    import DimensionSetting from "../dimension/DimensionSetting";
    import {mapActions, mapGetters} from 'vuex';
    import util from "../../common/util";
    import {MessageBox} from 'element-ui'
    // import Constants from "../../common/constants";

    export default {
        name: "QuestionnaireEditor",
        components: {
            GapFill,
            SingleSelect,
            DimensionSetting
        },
        computed: {
            ...mapGetters('questionnaire', [
                'currentQuestionnaire'
            ])
        },
        data() {
            return {
                questionnaire: {},
                titleDialog: false,
                tempTitle: '',
                tempTag: '',
                popoverVisible: false,
                questionType: [
                    'single',
                    'fill'
                ],
                sort: 0
            }
        },
        methods: {
            ...mapActions('questionnaire', [
                'setCurrentQuestionnaire',
                'newQuestionnaire'
            ]),
            goBackHome() {
                this.$router.go(-1);
            },
            addSingle() {
                this.sort = this.questionnaire.questions.length + 1;
                this.questionnaire.questions.push({
                    id: '',
                    type: 'single',
                    topic: '【标题】',
                    sort: this.sort,
                    choiceVos: [
                        {id: '', description: '选项一', score: 3, edit: false},
                        {id: '', description: '选项二', score: 2, edit: false},
                        {id: '', description: '选项三', score: 1, edit: false}
                    ],
                    dimension: "",
                    checked: false
                });
                this.setCurrentQuestionnaire(this.questionnaire);
                this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
            },
            addFill() {
                this.sort = this.questionnaire.questions.length + 1;
                this.questionnaire.questions.push({
                    id: '',
                    type: 'fill',
                    sort: this.sort,
                    topic: '【标题】',
                    dimension: "",
                    checked: false
                });
                this.setCurrentQuestionnaire(this.questionnaire);
                this.$refs['myScrollbar'].wrap.scrollTop = this.$refs['myScrollbar'].wrap.scrollHeight
            },
            submit() {
                // if (!this.questionnaire.dimensions || this.questionnaire.dimensions.length === 0) {
                //     alert("请设置维度！");
                //     return;
                // }
                //业务中的有些题目不需要维度
                // for (let index in this.questionnaire.questions) {
                //     if (this.questionnaire.questions[index].dimension === "") {
                //         alert("有题目未绑定维度，将不会保存到数据库，请绑定！");
                //         return;
                //     }
                // }
                if (this.questionnaire.dimensions.length > 0) {
                    let result = this.assertDimensionWeight(this.questionnaire.dimensions);
                    if (result) {
                        MessageBox.alert("各级维度之和必须为1！", "警告");
                        return;
                    }
                }
                // console.log(JSON.stringify(this.questionnaire));
                this.newQuestionnaire(this.questionnaire).then(result => {
                    this.$router.go(-1);
                }).catch(error => {
                    console.error(error);
                });
            },
            saveTitle() {
                if (this.tempTitle !== '' && this.tempTag !== '') {
                    this.questionnaire.name = this.tempTitle;
                    this.questionnaire.tag = this.tempTag;
                }
                this.popoverVisible = false;
                this.tempTitle = '';
                this.tempTag = '';
                this.setCurrentQuestionnaire(this.questionnaire);
            },
            assertDimensionWeight(dimensions) {
                let total = 0;
                let result = false;
                for (let index in dimensions) {
                    total += parseFloat(dimensions[index].weight);
                }
                if (total !== 1) {
                    result = true;
                    return result;
                } else {
                    for (let index in dimensions) {
                        if (dimensions[index].children.length !== 0) {
                            result = this.assertDimensionWeight(dimensions[index].children)
                        }
                    }
                }
                return result;
            }
        },
        watch: {
            currentQuestionnaire() {
                this.questionnaire = this.currentQuestionnaire;
            }
        },
        mounted() {
            this.questionnaire = this.currentQuestionnaire;
            // this.questionnaire.state = Constants.QUESTIONNAIRE.NOTISSUE;
            console.log(this.questionnaire);
        }
    }
</script>

<style scoped>
    .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .main {
        height: 60em;
    }
</style>
